<template>
    <BasicLayout>
        <template #wrapper>
            <el-card class="box-card">
                <el-form
                    ref="queryForm"
                    :model="queryParams"
                    :inline="true"
                    label-width="68px"
                >
                    <el-form-item label="店铺名称" prop="shopName">
                        <el-input
                            v-model="queryParams.shopName"
                            placeholder="请输入店铺名称"
                            clearable
                            size="small"
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="店铺地址" prop="shopAddress">
                        <el-input
                            v-model="queryParams.shopAddress"
                            placeholder="请输入店铺地址"
                            clearable
                            size="small"
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="店铺电话" prop="phone">
                        <el-input
                            v-model="queryParams.phone"
                            placeholder="请输入店铺电话"
                            clearable
                            size="small"
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="店铺状态" prop="isban">
                        <el-select
                            v-model="queryParams.isban"
                            placeholder="店铺表状态"
                            clearable
                            size="small"
                        >
                            <el-option
                                v-for="dict in isbanOptions"
                                :key="dict.dictValue"
                                :label="dict.dictLabel"
                                :value="dict.dictValue"
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="el-icon-search"
                            size="mini"
                            @click="handleQuery"
                            >搜索</el-button
                        >
                        <el-button
                            icon="el-icon-refresh"
                            size="mini"
                            @click="resetQuery"
                            >重置</el-button
                        >
                    </el-form-item>
                </el-form>

                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button
                            v-permisaction="['platform:shop:add']"
                            type="primary"
                            icon="el-icon-plus"
                            size="mini"
                            @click="handleAdd"
                            >新增</el-button
                        >
                    </el-col>
                    <el-col :span="1.5">
                        <el-button
                            v-permisaction="['platform:shop:edit']"
                            type="success"
                            icon="el-icon-edit"
                            size="mini"
                            :disabled="single"
                            @click="handleUpdate"
                            >修改</el-button
                        >
                    </el-col>
                    <el-col :span="1.5">
                        <el-button
                            v-permisaction="['platform:shop:remove']"
                            type="danger"
                            icon="el-icon-delete"
                            size="mini"
                            :disabled="multiple"
                            @click="handleDelete"
                        >
                            删除
                        </el-button>
                    </el-col>
                </el-row>

                <el-table
                    v-loading="loading"
                    :data="bwshopList"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column
                        type="selection"
                        width="55"
                        align="center"
                    />
                    <el-table-column
                        label="店铺id"
                        align="center"
                        prop="shopId"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="店铺封面图"
                        width="100px"
                        align="center"
                        prop="shopCover"
                        :show-overflow-tooltip="true"
                    >
                        <template slot-scope="scope">
                            <el-image
                                style="
                                    width: 100px;
                                    height: 100px;
                                    margin-right: 10px;
                                "
                                :src="scope.row.shopCover"
                            ></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="店铺名称"
                        align="center"
                        prop="shopName"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="店铺地址"
                        align="center"
                        prop="shopAddress"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="店铺电话"
                        align="center"
                        prop="phone"
                        :show-overflow-tooltip="true"
                    />
                    <el-table-column
                        label="状态"
                        align="center"
                        prop="isban"
                        :formatter="isbanFormat"
                        width="100"
                    >
                        <template slot-scope="scope">
                            <el-switch
                                v-model="scope.row.isbanFlg"
                                @change="changeShopBanned(scope.row)"
                            ></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        align="center"
                        class-name="small-padding fixed-width"
                    >
                        <template slot-scope="scope">
                            <el-button
                                v-permisaction="['platform:shop:edit']"
                                size="mini"
                                type="text"
                                icon="el-icon-edit"
                                @click="handleUpdate(scope.row)"
                                >修改</el-button
                            >
                            <el-button
                                v-permisaction="['platform:shop:remove']"
                                size="mini"
                                type="text"
                                icon="el-icon-delete"
                                @click="handleDelete(scope.row)"
                                >删除</el-button
                            >
                            <el-button
                                v-permisaction="['platform:shop:edit']"
                                size="mini"
                                type="text"
                                icon="el-icon-tickets"
                                @click="showListDialog(scope.row, '店铺订单')"
                                >店铺订单</el-button
                            >
                            <el-button
                                v-permisaction="['platform:shop:edit']"
                                size="mini"
                                type="text"
                                icon="el-icon-tickets"
                                @click="showListDialog(scope.row, '店铺活动')"
                                >店铺活动</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>

                <pagination
                    v-show="total > 0"
                    :total="total"
                    :page.sync="queryParams.pageIndex"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
                />

                <!-- 添加或修改对话框 -->
                <el-dialog
                    :title="title"
                    :visible.sync="open"
                    width="100vw"
                    fullscreen
                >
                    <el-form
                        ref="form"
                        :model="form"
                        :rules="rules"
                        label-width="100px"
                    >
                        <el-form-item label="店铺封面图" prop="shopCover"
                            ><uploadImg
                                :img-url.sync="form.shopCover"
                                :cut="false"
                        /></el-form-item>
                        <!-- <el-form-item label="店铺详情图" prop="detailCover"
                            ><uploadImg
                                :img-url.sync="form.detailCover"
                                :cut="false"
                        /></el-form-item> -->
                        <el-form-item label="店铺名称" prop="shopName"
                            ><el-input
                                v-model="form.shopName"
                                placeholder="店铺名称"
                        /></el-form-item>
                        <el-form-item label="店铺电话" prop="phone"
                            ><el-input
                                v-model="form.phone"
                                placeholder="店铺电话"
                        /></el-form-item>
                        <el-form-item label="分类" prop="classId">
                            <!-- <el-input v-model="form.classId" placeholder="分类id"
                            /> -->
                            <el-select
                                v-model="form.classId"
                                placeholder="选择店铺分类"
                                clearable
                                size="small"
                            >
                                <el-option
                                    v-for="dict in classifyList"
                                    :key="dict.classId"
                                    :label="dict.className"
                                    :value="dict.classId"
                                />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="单笔佣金" prop="brokerage"
                            ><el-input-number
                                :min="0"
                                :step="1"
                                v-model="form.brokerage"
                                placeholder="单笔佣金"
                        /></el-form-item>
                        <el-form-item label="单笔手续费" prop="deductMoney"
                            ><el-input-number
                                :min="0"
                                :step="1"
                                v-model="form.deductMoney"
                                placeholder="单笔手续费"
                        /></el-form-item>
                        <el-form-item label="配送范围" prop="distance">
                            <div class="row ali_cen">
                                <el-input
                                    style="width: 250px; margin-right: 10px"
                                    v-model="form.distance"
                                    placeholder="配送范围"
                                    oninput="value=value.match(/^[1-9]\d*(\.?\d{0,2})/g) && (value.match(/^[1-9]\d*(\.?\d{0,2})/g)[0] || '')"
                                />
                                <span>m(米)</span>
                            </div>
                        </el-form-item>

                        <el-form-item label="状态" prop="isban">
                            <el-radio-group v-model="form.isban">
                                <el-radio
                                    v-for="dict in isbanOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictValue"
                                    >{{ dict.dictLabel }}</el-radio
                                >
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item
                            label="店铺活动"
                            prop="shopCouponAndShop"
                            v-if="title !== '修改店铺表'"
                        >
                            <template
                                v-if="
                                    form.shopCouponAndShop &&
                                    form.shopCouponAndShop.length
                                "
                            >
                                <el-collapse v-model="collapseArr">
                                    <el-collapse-item
                                        v-for="(
                                            item, index
                                        ) in form.shopCouponAndShop"
                                        :title="'活动' + (index + 1)"
                                        :name="index"
                                        :key="index"
                                    >
                                        <template slot="title">
                                            <span>活动{{ index + 1 }}</span>
                                            <el-button
                                                type="text"
                                                icon="el-icon-delete"
                                                circle
                                                style="color: #eb3941"
                                                @click="delCoupon(index)"
                                            ></el-button>
                                        </template>

                                        <!-- <el-form> -->
                                        <el-form-item
                                            label="类型"
                                            prop="couponType"
                                        >
                                            <el-select
                                                v-model="item.couponType"
                                                placeholder="请选择"
                                            >
                                                <el-option
                                                    v-for="dict in couponTypeOptions"
                                                    :key="dict.dictValue"
                                                    :label="dict.dictLabel"
                                                    :value="
                                                        Number(dict.dictValue)
                                                    "
                                                />
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item
                                            label="单日时间"
                                            prop="timeRange"
                                        >
                                            <el-time-picker
                                                is-range
                                                arrow-control
                                                v-model="item.timeRange"
                                                value-format="HH:mm"
                                                format="HH:mm"
                                                range-separator="至"
                                                start-placeholder="开始时间"
                                                end-placeholder="结束时间"
                                                placeholder="选择时间范围"
                                            ></el-time-picker>
                                        </el-form-item>
                                        <el-form-item
                                            label="有效时间"
                                            prop="timeDateRange"
                                        >
                                            <el-date-picker
                                                v-model="item.timeDateRange"
                                                type="datetimerange"
                                                value-format="yyyy-MM-dd HH:mm:ss"
                                                format="yyyy-MM-dd HH:mm:ss"
                                                range-separator="至"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期"
                                            >
                                            </el-date-picker>
                                        </el-form-item>
                                        <el-form-item
                                            label="最低消费"
                                            prop="useMinMoney"
                                        >
                                            <div class="row ali_cen">
                                                <el-input-number
                                                    :min="0"
                                                    style="
                                                        width: 250px;
                                                        margin-right: 10px;
                                                    "
                                                    v-model="item.useMinMoney"
                                                    placeholder="最低消费"
                                                />
                                                <span>元</span>
                                            </div>
                                        </el-form-item>
                                        <el-form-item
                                            label="返现金额"
                                            prop="returnMoney"
                                        >
                                            <div class="row ali_cen">
                                                <el-input-number
                                                    :min="0"
                                                    style="
                                                        width: 250px;
                                                        margin-right: 10px;
                                                    "
                                                    v-model="item.returnMoney"
                                                    placeholder="返现金额"
                                                />
                                                <span>元</span>
                                            </div>
                                        </el-form-item>
                                        <el-form-item
                                            label="剩余优惠券数量"
                                            prop="num"
                                            ><el-input-number
                                                :min="0"
                                                v-model="item.num"
                                                placeholder="剩余优惠券数量"
                                        /></el-form-item>
                                        <el-form-item
                                            label="总优惠券数量"
                                            prop="oldNum"
                                            ><el-input-number
                                                :min="0"
                                                v-model="item.oldNum"
                                                placeholder="总优惠券数量"
                                        /></el-form-item>
                                        <el-form-item
                                            label="店铺要求"
                                            prop="shopClaim"
                                        >
                                            <el-autocomplete
                                                style="width: 100%"
                                                class="inline-input"
                                                type="textarea"
                                                v-model="item.shopClaim"
                                                :fetch-suggestions="querySearch"
                                                placeholder="店铺要求"
                                                value-key="reason"
                                            ></el-autocomplete>
                                        </el-form-item>
                                        <el-form-item
                                            label="活动状态"
                                            :prop="`shopCouponAndShop[${index}].isban`"
                                            :rules="{
                                                required: true,
                                                message: '请选择活动状态',
                                                trigger: 'blur',
                                            }"
                                        >
                                            <el-radio-group
                                                v-model="item.isban"
                                            >
                                                <el-radio
                                                    v-for="dict in isbanOptions"
                                                    :key="dict.dictValue"
                                                    :label="dict.dictValue"
                                                    >{{
                                                        dict.dictLabel
                                                    }}</el-radio
                                                >
                                            </el-radio-group>
                                        </el-form-item>
                                        <!-- </el-form> -->
                                    </el-collapse-item>
                                </el-collapse>
                            </template>
                            <div style="margin-top: 20px">
                                <el-button
                                    type="primary"
                                    icon="el-icon-plus"
                                    circle
                                    @click="addCoupon"
                                />
                            </div>
                        </el-form-item>

                        <el-form-item label="权重" prop="weight"
                            ><el-input-number
                                :min="0"
                                :step="1"
                                v-model="form.weight"
                                placeholder="权重"
                        /></el-form-item>
                        <el-form-item label="省市区" prop="shopAddress">
                            <el-input
                                readonly
                                :value="
                                    form.province +
                                    '/' +
                                    form.city +
                                    '/' +
                                    form.district
                                "
                                placeholder="店铺名称"
                            />
                        </el-form-item>
                        <el-form-item label="详细地址" prop="shopAddress">
                            <el-input
                                v-model="form.shopAddress"
                                placeholder="请输入街道"
                            />
                        </el-form-item>
                        <el-form-item label="店铺地址" prop="shopAddress">
                            <div class="map" style="position: relative">
                                <div class="map-serach">
                                    <el-autocomplete
                                        style="width: 100%"
                                        v-model="inputValue"
                                        :fetch-suggestions="
                                            querySearchAddressList
                                        "
                                        placeholder="输入关键字查询"
                                        :debounce="500"
                                        suffix-icon="el-icon-search"
                                        @select="confirmAddress"
                                    />
                                </div>
                                <baidu-map
                                    style="width: 100%; height: 100%"
                                    :center="location"
                                    :zoom="10"
                                    ak="9V57r73eNfZGmONmNbMpYv2vfpaMHAM0"
                                    @ready="mapReady"
                                    scroll-wheel-zoom
                                >
                                    <bm-navigation
                                        anchor="BMAP_ANCHOR_TOP_LEFT"
                                    />
                                    <bm-marker-clusterer averageCenter>
                                        <bm-marker :position="location" />
                                    </bm-marker-clusterer>
                                    <bm-local-search
                                        :keyword="searchInfo.keyword"
                                        auto-viewport
                                        :zoom="10"
                                        style="display: none"
                                        @markersset="setAddressList"
                                    />
                                </baidu-map>
                            </div>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="submitForm"
                            >确 定</el-button
                        >
                        <el-button @click="cancel">取 消</el-button>
                    </div>
                </el-dialog>
            </el-card>

            <el-dialog
                title="设置地址"
                :visible.sync="showMap"
                width="800px"
                :before-close="handleClose"
            >
                <elMap
                    @getLocation="getLocation"
                    :address="form.shopAddress"
                ></elMap>
                <div slot="footer">
                    <el-button @click="showMap = false">取 消</el-button>
                    <el-button type="primary" @click="showMap = false"
                        >确 定</el-button
                    >
                </div>
            </el-dialog>

            <el-dialog
                :title="listTitle"
                :visible.sync="listOpen"
                width="90vw"
                append-to-body
            >
                <div>
                    <Order
                        :shop-id="listShopId"
                        v-if="listTitle === '店铺订单'"
                    ></Order>
                    <ShopCoupon
                        :shop-id="listShopId"
                        v-else-if="listTitle === '店铺活动'"
                    ></ShopCoupon>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="hideListDialog">关 闭</el-button>
                </div>
            </el-dialog>
        </template>
    </BasicLayout>
</template>

<script>
import {
    addBwShop,
    delBwShop,
    getBwShop,
    listBwShop,
    updateBwShop,
    getAreaData,
    addBwNewShop,
} from "@/api/bw/platform/shop/shop";
import { listBwClass } from "@/api/bw/platform/class/class";
import Order from "../order/index.vue";
import ShopCoupon from "./shopcoupon.vue";
import { updateBwUser } from "@/api/bw/platform/user/user";

import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import BmView from "vue-baidu-map/components/map/MapView.vue";
import BmNavigation from "vue-baidu-map/components/controls/Navigation";
import BmMarkerClusterer from "vue-baidu-map/components/extra/MarkerClusterer";
import BmMarker from "vue-baidu-map/components/overlays/Marker";
import BmLocalSearch from "vue-baidu-map/components/search/LocalSearch.vue";
import { listBwReason } from "@/api/bw/platform/reason/index";

let geocoder;
export default {
    name: "Config",
    components: {
        Order,
        BaiduMap,
        BmView,
        BmNavigation,
        BmMarkerClusterer,
        BmMarker,
        BmLocalSearch,
        ShopCoupon,
    },
    data() {
        return {
            listTitle: "",
            listOpen: false,
            listShopId: "",

            showMap: false,
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 总条数
            total: 0,
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            isEdit: false,
            // 类型数据字典
            typeOptions: [],
            bwshopList: [],
            isbanOptions: [],
            couponTypeOptions: [],
            // 查询参数
            queryParams: {
                pageIndex: 1,
                pageSize: 10,
                shopId: undefined,
                shopCover: undefined,
                // detailCover: undefined,
                shopName: undefined,
                shopAddress: undefined,
                phone: undefined,
                isban: undefined,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                shopId: [
                    {
                        required: true,
                        message: "店铺id不能为空",
                        trigger: "blur",
                    },
                ],
                shopCover: [
                    {
                        required: true,
                        message: "店铺封面图不能为空",
                        trigger: "blur",
                    },
                ],
                // detailCover: [
                //     {
                //         required: true,
                //         message: "店铺详情图不能为空",
                //         trigger: "blur",
                //     },
                // ],
                shopName: [
                    {
                        required: true,
                        message: "店铺名称不能为空",
                        trigger: "blur",
                    },
                ],
                shopAddress: [
                    {
                        required: true,
                        message: "店铺地址不能为空",
                        trigger: "blur",
                    },
                ],
                phone: [
                    {
                        required: true,
                        message: "店铺电话不能为空",
                        trigger: "blur",
                    },
                ],
                isban: [
                    {
                        required: true,
                        message: "状态不能为空",
                        trigger: "blur",
                    },
                ],
                "shopCouponAndShop.isban": [
                    {
                        required: true,
                        message: "活动状态不能为空",
                        trigger: "blur",
                    },
                ],
            },

            classifyList: [],
            areaOptions: [],
            collapseArr: [],
            location: {
                lng: 104.081534,
                lat: 30.655822,
            },
            BMap: {},
            map: {},
            inputValue: "",
            searchInfo: {
                keyword: "",
                cb: null,
                timer: null,
                oldData: [],
            },
            reasonList: [],
        };
    },
    created() {
        this.getList();
        this.getListForClass();
        this.getDicts("is_banned").then((response) => {
            this.isbanOptions = response.data;
        });
        this.getDicts("shop_coupon_type").then((response) => {
            this.couponTypeOptions = response.data;
        });
        listBwReason({
            pageIndex: 1,
            pageSize: 150,
            classId: 2,
        }).then((res) => {
            this.reasonList = res.data.list || [];
        });
    },
    methods: {
        querySearch(queryString, cb) {
            cb(this.reasonList);
        },
        mapReady({ BMap, map }) {
            this.BMap = BMap;
            this.map = map;
            geocoder = new BMap.Geocoder(); //创建地址解析器的实例
            map.addEventListener("click", ({ point }) => {
                this.location.lng = point.lng;
                this.location.lat = point.lat;
                geocoder.getLocation(point, (res) => {
                    this.form.shopAddress = res.address;
                    res = res.addressComponents;
                    this.form.province = res.province;
                    this.form.city = res.city;
                    this.form.district = res.district;
                    this.form.street = res.street;
                });
            });
        },
        querySearchAddressList(queryString, cb) {
            if (this.searchInfo.keyword === queryString) {
                return cb(this.searchInfo.oldData);
            }

            this.searchInfo.cb = cb;
            this.searchInfo.keyword = this.inputValue;
        },
        setAddressList(e) {
            console.log(e);
            if (this.searchInfo.cb) {
                this.searchInfo.oldData = e.map((item) => {
                    return {
                        value: item.address,
                    };
                });
                this.searchInfo.cb(this.searchInfo.oldData);
                this.searchInfo.cb = null;
            }
        },
        confirmAddress(e) {
            geocoder.getPoint(e.value, (point) => {
                this.searchInfo.keyword = "";
                this.location.lng = point.lng;
                this.location.lat = point.lat;
                geocoder.getLocation(point, (res) => {
                    this.form.shopAddress = e.value;
                    res = res.addressComponents;
                    this.form.province = res.province;
                    this.form.city = res.city;
                    this.form.district = res.district;
                    this.form.street = res.street;
                });
            });
        },
        addCoupon() {
            this.form.shopCouponAndShop.push({
                shopCouponId: undefined,
                shopId: undefined,
                num: undefined,
                couponType: undefined,
                startTime: undefined,
                endTime: undefined,
                useMinMoney: undefined,
                returnMoney: undefined,
                oldNum: undefined,
                timeDateRange: undefined,
                shopClaim: undefined,
                isban: undefined,

                timeRange: ["00:00", "23:59"],
            });
            this.collapseArr.push(this.form.shopCouponAndShop.length - 1);
        },
        delCoupon(index) {
            this.form.shopCouponAndShop.splice(index, 1);
        },

        showListDialog(row, title) {
            this.listTitle = title;
            this.listOpen = true;
            this.listShopId = Number(row.shopId);
        },
        hideListDialog() {
            this.listOpen = false;
            this.listTitle = "";
        },

        getListForClass() {
            listBwClass({
                pageIndex: 1,
                pageSize: 100,
            }).then((res) => {
                this.classifyList = res.data.list;
            });
        },
        /** 查询参数列表 */
        getList() {
            this.loading = true;
            listBwShop(
                this.addDateRange(this.queryParams, this.dateRange)
            ).then((response) => {
                response.data.list.forEach((item) => {
                    item.isbanFlg = item.isban === "T";
                });
                this.bwshopList = response.data.list;
                this.total = response.data.count;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                shopId: undefined,
                shopCover: undefined,
                // detailCover: undefined,
                shopName: undefined,
                shopAddress: undefined,
                longitude: undefined,
                latitude: undefined,
                phone: undefined,
                classId: undefined,
                weight: undefined,
                brokerage: undefined,
                deductMoney: undefined,
                distance: undefined,
                city: "",
                province: "",
                district: "",
                isban: undefined,
                street: undefined,
                shopCouponAndShop: [],
            };
            this.resetForm("form");
        },
        isbanFormat(row) {
            return this.selectDictLabel(this.isbanOptions, row.isban);
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageIndex = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加店铺表";
            this.isEdit = false;
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.shopId);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const shopId = row.shopId || this.ids;
            getBwShop(shopId).then((response) => {
                this.form = response.data;
                this.open = true;
                this.title = "修改店铺表";
                this.isEdit = true;
            });
        },
        /** 提交按钮 */
        submitForm: function () {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    let temp = { ...this.form };
                    temp.longitude = this.location.lng;
                    temp.latitude = this.location.lat;
                    temp.distance = Number(temp.distance);
                    (temp.shopCouponAndShop || []).forEach((item) => {
                        if (item.timeRange) {
                            item.timeRange = item.timeRange.slice(0);
                            item.startTime = item.timeRange[0];
                            item.endTime = item.timeRange[1];
                        }
                        if (item.timeDateRange) {
                            item.timeDateRange = item.timeDateRange.slice(0);
                            item.startDate = item.timeDateRange[0];
                            item.endDate = item.timeDateRange[1];
                        }
                    });

                    if (this.form.shopId !== undefined) {
                        updateBwShop(temp).then((response) => {
                            if (response.code === 200) {
                                this.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                            } else {
                                this.msgError(response.msg);
                            }
                        });
                    } else {
                        addBwNewShop(temp).then((response) => {
                            if (response.code === 200) {
                                this.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                            } else {
                                this.msgError(response.msg);
                            }
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const Ids = row.shopId || this.ids;
            this.$confirm('是否确认删除编号为"' + Ids + '"的数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(function () {
                    return delBwShop(Ids);
                })
                .then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                })
                .catch(function () {});
        },

        handleClose() {
            this.visibleMap();
        },
        visibleMap() {
            this.showMap = !this.showMap;
        },
        getLocation(e) {
            this.form.shopAddress = e.poi.district + e.poi.address;
            this.form.longitude = e.poi.location.lng;
            this.form.latitude = e.poi.location.lat;
            console.log(this.form);
        },
        changeShopBanned(row) {
            row.isban = row.isbanFlg ? "T" : "F";

            updateBwShop(row).then((response) => {
                if (response.code === 200) {
                    this.msgSuccess("修改成功");
                } else {
                    this.msgError(response.msg);
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.map {
    width: 500px;
    height: 400px;

    .map-serach {
        position: absolute;
        z-index: 555;
        width: 280px;
        height: 40px;
        top: 10px;
        left: 60px;

        & ::v-deep .el-input__inner {
            border: none;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12),
                0 0 6px rgba(0, 0, 0, 0.04);
        }
    }

    & ::v-deep {
        .BMap_cpyCtrl,
        .anchorBL {
            display: none;
        }
    }
}

.el-form-item .el-form-item {
    margin-bottom: 20px !important;
}
</style>
